'use client';

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';

export default function SettingsPage() {
  const [generalSettings, setGeneralSettings] = useState({
    siteName: '校园二手交易平台',
    siteDescription: '为校园师生提供便捷的二手物品交易服务',
    contactEmail: 'admin@example.com',
    contactPhone: '123-456-7890'
  });

  const [notificationSettings, setNotificationSettings] = useState({
    enableEmailNotifications: true,
    enableOrderNotifications: true,
    enableFeedbackNotifications: false,
    enableSystemNotifications: true
  });

  const [securitySettings, setSecuritySettings] = useState({
    requireEmailVerification: true,
    loginAttempts: '5',
    sessionTimeout: '30',
    passwordMinLength: '8'
  });

  const handleGeneralSettingsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setGeneralSettings(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleNotificationSettingsChange = (name: string, checked: boolean) => {
    setNotificationSettings(prev => ({
      ...prev,
      [name]: checked
    }));
  };

  const handleSecuritySettingsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setSecuritySettings(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSaveSettings = (type: string) => {
    // 这里可以实现保存设置到后端的逻辑
    alert(`${type}设置已保存`);
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">系统设置</h1>
        <p className="text-muted-foreground">管理系统的基本配置和参数</p>
      </div>

      <Tabs defaultValue="general" className="space-y-4">
        <TabsList>
          <TabsTrigger value="general">基本设置</TabsTrigger>
          <TabsTrigger value="notifications">通知设置</TabsTrigger>
          <TabsTrigger value="security">安全设置</TabsTrigger>
        </TabsList>

        <TabsContent value="general" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>基本信息</CardTitle>
              <CardDescription>设置系统的基本信息和联系方式</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="siteName">系统名称</Label>
                  <Input
                    id="siteName"
                    name="siteName"
                    value={generalSettings.siteName}
                    onChange={handleGeneralSettingsChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="siteDescription">系统描述</Label>
                  <Input
                    id="siteDescription"
                    name="siteDescription"
                    value={generalSettings.siteDescription}
                    onChange={handleGeneralSettingsChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="contactEmail">联系邮箱</Label>
                  <Input
                    id="contactEmail"
                    name="contactEmail"
                    type="email"
                    value={generalSettings.contactEmail}
                    onChange={handleGeneralSettingsChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="contactPhone">联系电话</Label>
                  <Input
                    id="contactPhone"
                    name="contactPhone"
                    value={generalSettings.contactPhone}
                    onChange={handleGeneralSettingsChange}
                  />
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button onClick={() => handleSaveSettings('基本')}>保存设置</Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="notifications" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>通知设置</CardTitle>
              <CardDescription>配置系统的通知和提醒功能</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="emailNotifications">邮件通知</Label>
                    <p className="text-sm text-muted-foreground">接收系统邮件通知</p>
                  </div>
                  <Switch
                    id="emailNotifications"
                    checked={notificationSettings.enableEmailNotifications}
                    onCheckedChange={(checked) => handleNotificationSettingsChange('enableEmailNotifications', checked)}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="orderNotifications">订单通知</Label>
                    <p className="text-sm text-muted-foreground">接收新订单和订单状态变更通知</p>
                  </div>
                  <Switch
                    id="orderNotifications"
                    checked={notificationSettings.enableOrderNotifications}
                    onCheckedChange={(checked) => handleNotificationSettingsChange('enableOrderNotifications', checked)}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="feedbackNotifications">反馈通知</Label>
                    <p className="text-sm text-muted-foreground">接收新用户反馈通知</p>
                  </div>
                  <Switch
                    id="feedbackNotifications"
                    checked={notificationSettings.enableFeedbackNotifications}
                    onCheckedChange={(checked) => handleNotificationSettingsChange('enableFeedbackNotifications', checked)}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="systemNotifications">系统通知</Label>
                    <p className="text-sm text-muted-foreground">接收系统更新和维护通知</p>
                  </div>
                  <Switch
                    id="systemNotifications"
                    checked={notificationSettings.enableSystemNotifications}
                    onCheckedChange={(checked) => handleNotificationSettingsChange('enableSystemNotifications', checked)}
                  />
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button onClick={() => handleSaveSettings('通知')}>保存设置</Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="security" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>安全设置</CardTitle>
              <CardDescription>配置系统的安全和访问控制</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="requireEmailVerification">邮箱验证</Label>
                    <p className="text-sm text-muted-foreground">要求用户验证邮箱</p>
                  </div>
                  <Switch
                    id="requireEmailVerification"
                    checked={securitySettings.requireEmailVerification}
                    onCheckedChange={(checked) => setSecuritySettings(prev => ({ ...prev, requireEmailVerification: checked }))}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="loginAttempts">最大登录尝试次数</Label>
                  <Input
                    id="loginAttempts"
                    name="loginAttempts"
                    type="number"
                    min="1"
                    max="10"
                    value={securitySettings.loginAttempts}
                    onChange={handleSecuritySettingsChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="sessionTimeout">会话超时时间（分钟）</Label>
                  <Input
                    id="sessionTimeout"
                    name="sessionTimeout"
                    type="number"
                    min="5"
                    value={securitySettings.sessionTimeout}
                    onChange={handleSecuritySettingsChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="passwordMinLength">密码最小长度</Label>
                  <Input
                    id="passwordMinLength"
                    name="passwordMinLength"
                    type="number"
                    min="6"
                    value={securitySettings.passwordMinLength}
                    onChange={handleSecuritySettingsChange}
                  />
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button onClick={() => handleSaveSettings('安全')}>保存设置</Button>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}